<template>
  <div class="form__container">
    <FormTitle>国内主体-基本信息</FormTitle>
    <t-form
      ref="chinaBasicInfoRef"
      :rules="pageData.formRules"
      :disabled="props.readOnly"
      :data="pageData.localData"
      :labelWidth="120"
    >
      <!-- <t-form-item label="客户编号" name="customerNo">
        <t-input v-model="pageData.localData.providerNo" disabled />
      </t-form-item> -->
      <t-form-item label="客户中文名称" name="name">
        <t-input :showLimitNumber="true" v-if="!readOnly" v-model="pageData.localData.name" maxlength="100" />
        <div v-else class="form__text">{{ pageData.localData.name }}</div>
      </t-form-item>
      <t-form-item label="中文简称" name="nickName">
        <t-input :showLimitNumber="true" v-if="!readOnly" v-model="pageData.localData.nickName" maxlength="100" />
        <div v-else class="form__text">{{ pageData.localData.nickName }}</div>
      </t-form-item>
      <t-form-item label="中文地址" name="address">
        <t-input :showLimitNumber="true" v-if="!readOnly" v-model="pageData.localData.address" maxlength="100" />
        <div v-else class="form__text">{{ pageData.localData.address }}</div>
      </t-form-item>
      <t-form-item label="省/自治区" name="province">
        <t-input :showLimitNumber="true" v-if="!readOnly" v-model="pageData.localData.province" maxlength="100" />
        <div v-else class="form__text">{{ pageData.localData.province }}</div>
      </t-form-item>
      <t-form-item label="地市" name="city">
        <t-input :showLimitNumber="true" v-if="!readOnly" v-model="pageData.localData.city" maxlength="100" />
        <div v-else class="form__text">{{ pageData.localData.city }}</div>
      </t-form-item>
      <t-form-item label="主营业务" name="chinaMainBusiness">
        <t-textarea v-if="!readOnly" v-model="pageData.localData.chinaMainBusiness" :autosize="{ minRows: 5 }" />
        <div v-else class="form__text">{{ pageData.localData.chinaMainBusiness }}</div>
      </t-form-item>

      <t-form-item label="客户市场" name="chinaMainMarket">
        <t-textarea v-if="!readOnly" v-model="pageData.localData.chinaMainMarket" :autosize="{ minRows: 5 }" />
        <div v-else class="form__text">{{ pageData.localData.chinaMainMarket }}</div>
      </t-form-item>
    </t-form>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, watch } from "vue";
import type { FormInstanceFunctions } from "tdesign-vue-next";

import FormTitle from "@/components/Form/Title/index.vue";

const props = defineProps(["formData", "readOnly"]);
const emits = defineEmits(["updateData", "onValidateResult"]);

const chinaBasicInfoRef = ref<FormInstanceFunctions | null>(null);

const pageData = reactive({
  formRules: {
    name: [{ required: true, message: "请输入名称", type: "error", trigger: "blur" }],
    province: [{ required: true, message: "请输入省份", type: "error", trigger: "blur" }],
    nickName: [{ required: true, message: "请输入简称", type: "error", trigger: "blur" }]
  },
  localData: { ...props.formData }
});

const getFormValidateResult = async () => {
  return await chinaBasicInfoRef?.value?.validateOnly();
};

watch(
  () => pageData.localData,
  (newData) => {
    emits("updateData", newData);
    emits("onValidateResult", getFormValidateResult());
  },
  { deep: true, flush: "post" }
);

// pageData.localData = { ...props.formData };
</script>
